<template>
    <div class="index-warp" v-loading="loading">
        <div class="banner">
            <el-carousel height="5.5rem">
                <el-carousel-item v-for="(item,index) in bannerList" :key="index">
                    <div class="banner-img" @click="clickBannerFun(item)">
                        <img :src="item.image" alt="" />
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="tab">
          <div class="tab-item" :class="{'tab-item-active':tabCurrent == index}" @click="selectTabFun(item,index)" v-for="(item,index) in tabList" :key="index">{{ item.name }}</div>
        </div>
        
        <forum ref="forum" v-if="tabCurrent == 0" :keyword="keyword"></forum>
        <know ref="know" v-if="tabCurrent == 1" :keyword="keyword"></know> 
        <study ref="study" v-if="tabCurrent == 2" :keyword="keyword"></study>
        <notice ref="notice" v-if="tabCurrent == 3" :keyword="keyword"></notice>
    </div>
</template>
  
<script>

import forum from "./indexComponents/forum.vue"
import know from "./indexComponents/know.vue"
import study from "./indexComponents/study.vue"
import notice from "./indexComponents/notice.vue"
import {getBanner} from "@/api/common";
export default {
    components: {
        forum,
        know,
        study,
        notice,
    },
    data() {
        return {
            loading:true,
            bannerList: [1, 2, 3, 4],
            tabList: [
                { name: "论坛" },
                { name: "知识" },
                { name: "学习中心" },
                { name: "公告" },
            ],
            tabCurrent: 0,
            keyword: this.$route.query.keyword || '',
        };
    },
    mounted() {
        this.tabCurrent = this.$route.query.current || 0
        this.loading = true
        let that = this
        setTimeout(()=>{
                this.loading = false
            },1000)
        this.$bus.$on("search",(val)=>{
          this.keyword = val
          this.loading = true
          setTimeout(()=>{
            if(this.tabCurrent == 0){
                this.$refs.forum.paginationFun(1)
            }else if(this.tabCurrent == 1){
                this.$refs.know.paginationFun(1)
            }else if(this.tabCurrent == 2){
                this.$refs.study.paginationFun(1)
            }else if(this.tabCurrent == 3){
                this.$refs.notice.paginationFun(1)
            }
            setTimeout(()=>{
                this.loading = false
            },1000)
          },100)
        })
        this.getBannerFun()
    },
    methods: {
        getBannerFun() {
            getBanner().then(res => {
                this.bannerList = res.data
            })
        },
        clickBannerFun(item){
            if(item.url){
                window.location.href = item.url
            }
        },
        selectTabFun(item, index) {
            this.tabCurrent = index;
        },
    },
};
</script>

  <style lang="less" scoped>
.index-warp {
    .banner {
        width: 100%;
        height: 5.5rem;
        .banner-img {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .tab {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0.4rem;
        .tab-item {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 2.25rem;
            height: 0.75rem;
            border-radius: 0.15rem;
            background: rgba(79, 138, 248, 0.1);
            font-size: 0.3rem;
            color: #333;
            cursor: pointer;
            user-select: none;
            margin: 0 0.3rem;
        }
        .tab-item-active {
            background: #4f8af8;
            color: #fff;
        }
    }
    .list {
        padding-top: 0.75rem;
    }
    .pagination {
        display: flex;
        justify-content: center;
        padding: 0.375rem 0 1rem;
    }
}
</style>
  